<template>
    <div class="min-h-screen bg-gradient-to-br from-slate-50 via-blue-50 to-indigo-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <!-- 页面头部 -->
            <div class="mb-8">
                <div class="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-6">
                    <div>
                        <h1 class="text-4xl font-bold text-gray-900 mb-2">题目审核</h1>
                        <p class="text-lg text-gray-600">审核用户提交的题目内容</p>
                    </div>
                    <div class="flex items-center gap-4">
                        <div class="flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-orange-100 to-amber-100 rounded-full">
                            <div class="w-3 h-3 bg-orange-500 rounded-full animate-pulse" />
                            <span class="text-sm font-medium text-orange-700">待审核题目</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 题目列表 -->
            <div class="bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg border border-white/50 overflow-hidden">
                <!-- 加载状态 -->
                <div v-if="loading" class="flex items-center justify-center py-16">
                    <div class="flex flex-col items-center">
                        <div class="relative mb-4">
                            <div class="w-12 h-12 border-4 border-gray-200 border-t-indigo-500 rounded-full animate-spin" />
                            <div class="absolute inset-0 w-12 h-12 border-4 border-transparent border-r-purple-400 rounded-full animate-spin animate-reverse" style="animation-delay: 0.5s;" />
                        </div>
                        <p class="text-lg font-medium text-gray-700">加载待审核题目中...</p>
                    </div>
                </div>

                <!-- 题目表格 -->
                <div v-else class="overflow-x-auto">
                    <table class="w-full">
                        <thead class="bg-gradient-to-r from-gray-50 to-orange-50 border-b border-gray-200">
                            <tr>
                                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">题目标题</th>
                                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">领域</th>
                                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">难度</th>
                                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">提交人</th>
                                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">提交时间</th>
                                <th class="px-6 py-4 text-left text-sm font-semibold text-gray-900">操作</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-100">
                            <tr 
                                v-for="topic in topics" 
                                :key="topic.id"
                                class="hover:bg-gray-50/80 transition-colors duration-200"
                            >
                                <td class="px-6 py-4">
                                    <div class="max-w-md">
                                        <div class="font-medium text-gray-900 line-clamp-2">{{ topic.title }}</div>
                                        <div class="text-sm text-gray-500 mt-1">
                                            审核状态: <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-orange-100 text-orange-800">
                                                {{ getStatusText(topic.reviewStatus) }}
                                            </span>
                                        </div>
                                    </div>
                                </td>
                                <td class="px-6 py-4">
                                    <span class="inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-blue-100 text-blue-800">
                                        {{ topic.domain }}
                                    </span>
                                </td>
                                <td class="px-6 py-4">
                                    <span :class="getDifficultyClass(topic.difficulty)">
                                        {{ topic.difficulty }}
                                    </span>
                                </td>
                                <td class="px-6 py-4">
                                    <div class="flex items-center gap-2">
                                        <div class="w-8 h-8 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-full flex items-center justify-center text-white font-semibold text-sm">
                                            {{ topic.submitter?.username?.charAt(0) || 'U' }}
                                        </div>
                                        <span class="font-medium text-gray-900">{{ topic.submitter?.username || '未知用户' }}</span>
                                    </div>
                                </td>
                                <td class="px-6 py-4 text-sm text-gray-500">
                                    {{ new Date(topic.createdAt).toLocaleDateString() }}
                                </td>
                                <td class="px-6 py-4">
                                    <button 
                                        class="group flex items-center gap-2 px-4 py-2 bg-gradient-to-r from-indigo-500 to-purple-600 text-white rounded-lg font-medium hover:from-indigo-600 hover:to-purple-700 transition-all duration-300 shadow-lg hover:shadow-xl"
                                        @click="navigateToReview(topic.id)"
                                    >
                                        <svg class="w-4 h-4 transition-transform duration-300 group-hover:scale-110" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                                        </svg>
                                        审核
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    
                    <!-- 空状态 -->
                    <div v-if="topics.length === 0" class="text-center py-16">
                        <div class="w-24 h-24 bg-gradient-to-br from-green-100 to-emerald-100 rounded-full flex items-center justify-center mx-auto mb-6">
                            <svg class="w-12 h-12 text-green-500" viewBox="0 0 24 24" fill="none" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
                            </svg>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-2">暂无待审核题目</h3>
                        <p class="text-gray-600">所有题目都已审核完毕，太棒了！</p>
                    </div>
                </div>

                <!-- 分页 -->
                <div v-if="topics.length > 0" class="bg-gray-50/80 px-6 py-4 border-t border-gray-200">
                    <div class="flex items-center justify-between">
                        <div class="text-sm text-gray-700">
                            显示第 {{ (pagination.current - 1) * pagination.pageSize + 1 }} - {{ Math.min(pagination.current * pagination.pageSize, pagination.total) }} 条，共 {{ pagination.total }} 条
                        </div>
                        <div class="flex items-center gap-2">
                            <button 
                                class="px-3 py-2 border border-gray-200 rounded-lg text-sm hover:bg-gray-100 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
                                :disabled="pagination.current <= 1"
                                @click="changePage(pagination.current - 1)"
                            >
                                上一页
                            </button>
                            <span class="px-3 py-2 text-sm text-gray-700">
                                第 {{ pagination.current }} 页 / 共 {{ Math.ceil(pagination.total / pagination.pageSize) }} 页
                            </span>
                            <button 
                                class="px-3 py-2 border border-gray-200 rounded-lg text-sm hover:bg-gray-100 transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
                                :disabled="pagination.current >= Math.ceil(pagination.total / pagination.pageSize)"
                                @click="changePage(pagination.current + 1)"
                            >
                                下一页
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useTopics } from '../composables/useTopics'
import type { ReviewStatus } from '~/types/topic.d.ts'
const router = useRouter()
const { topics, fetchTopics, loading, pagination, changePage, changePageSize } = useTopics()
const columns = [
    {
        title: '标题',
        dataIndex: 'title',
        key: 'title',
    },
    {
        title: '领域',
        dataIndex: 'domain',
        key: 'domain',
    },
    {
        title: '难度',
        dataIndex: 'difficulty',
        key: 'difficulty',
    },
    {
        title: '审核状态',
        dataIndex: 'reviewStatus',
        key: 'reviewStatus',
    },
    {
        title: '提交人',
        dataIndex: 'submitter',
        key: 'submitter',
    },
]

const pageConf = computed(() => {
    return {
        current: pagination.value.current,
        pageSize: pagination.value.pageSize,
        total: pagination.value.total,
    }
})

const handleTableChange = (pagination: { current?: number; pageSize?: number }) => {
    if (pagination.current) {
        changePage(pagination.current)
    }
    if (pagination.pageSize && pagination.current) {
        changePageSize(pagination.pageSize, pagination.current)
    }
}

const getStatusText = (status: ReviewStatus) => {
    switch (status) {
        case 'pending':
            return '待审核';
        case 'approved':
            return '已通过';
        case 'rejected':
            return '已拒绝';
        default:
            return '未知';
    }
};

const getDifficultyClass = (difficulty: string) => {
    switch (difficulty) {
        case '基础':
            return 'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-green-100 text-green-800';
        case '中等':
            return 'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-yellow-100 text-yellow-800';
        case '困难':
            return 'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-red-100 text-red-800';
        default:
            return 'inline-flex items-center px-3 py-1 rounded-full text-sm font-medium bg-gray-100 text-gray-800';
    }
};

const navigateToReview = (topicId: number) => {
    router.push(`/StudyArea/Topics/TopicDetail/${topicId}?mode=review`)
}

onMounted(() => {
    fetchTopics({ reviewStatus: 'pending' as ReviewStatus }, 'review')
})
</script>